<template>
  <div id="board-two-view">
		<dv-full-screen-container>
			<top-header/>
      <dv-border-box-1 class="main-content">
        <div class="first-floor">
        <board-two-first-left-charts/>
        <board-two-first-right-charts/>
        </div>
         <div class="second-floor">
       <board-two-second-left-charts/>
       <board-two-second-right-charts/>
        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
 import BoardTwoFirstLeftCharts from './board2/boardTwoFirstLeftCharts.vue'
import BoardTwoFirstRightCharts from './board2/boardTwoFirstRightCharts.vue'
import BoardTwoSecondLeftCharts from './board2/boardTwoSecondLeftCharts.vue'
import BoardTwoSecondRightCharts from './board2/boardTwoSecondRightCharts.vue'
 import topHeader from './board2/topHeader.vue'

export default {
	name: 'BoardTwoView',
		components: {
      topHeader,
      BoardTwoFirstLeftCharts,
BoardTwoFirstRightCharts,
BoardTwoSecondLeftCharts,
BoardTwoSecondRightCharts,
    }
}
</script>

<style lang="less">
#board-two-view {
		width: 100%;
		height: 100%;
		background-color: #030409;
		color: #fff;

		#dv-full-screen-container {
			background-image: url('./img/bg.png');
			background-size: 100% 100%;
			box-shadow: 0 0 3px blue;
			display: flex;
			flex-direction: column;
		}

    	.main-content {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
     .first-floor{
      position: relative;
      flex: 1;
			display: flex;
      height: 40%;
			box-sizing: border-box;
      flex-direction:row;
      margin: 20px;
    }
    .second-floor{
      position: relative;
      flex: 1;
      height: 55%;
			display: flex;
			box-sizing: border-box;
      flex-direction: row;
      margin: 20px;
    }

  }
</style>
